<script setup>
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    symbol: {
        type: Boolean,
        default: true
    }
})

const typeMap = {
    1: 'Egg',
    2: 'Wheel',
    3: 'Sign in',
    4: 'Watch Video',
    5: 'Newbie Task',
    6: 'Withdraw'
}

</script>

<template>
    <div class="records">
        <ul>
            <li v-for="flow in data">
                <div class="records-item">
                    <div class="records-item-left">
                        <span class="amount">
                            {{ flow.amount }}<template v-if="props.symbol">$</template>
                        </span>
                        <span class="tips">{{ typeMap[flow.type] }}</span>
                    </div>
                    <div class="records-item-right">
                        <span class="total">{{ flow.totalAmount }}<template v-if="props.symbol">$</template></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang="scss">
.records ul li {
    padding: 0 3vmin;
}

.records-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18vmin;
    border-bottom: 1px solid #696969;

    span {
        font-weight: bold;
    }

    &-left {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 13vmin;

        .amount {
            font-size: var(--middle-font-size);
            color: #555555;
        }

        .tips {
            font-size: var(--small-font-size);
            color: #b4b4b4;
        }
    }

    &-right {
        .total {
            color: var(--tab-color);
            font-size: var(--normal-font-size);
        }
    }
}
</style>